<script setup lang="ts">
    import YunCard from "./YunCard.vue";
    import YunLoadingCube from "./YunLoadingCube.vue";
    const props = defineProps<{
        text: string;
        isfailed?: boolean;
    }>();
</script>

<template>
    <YunCard class="yun-loading">
        <YunLoadingCube
            :hex-color="props.isfailed ? '#e06c60' : '#081c0e'"
            :pause="props.isfailed" />
        <span class="yun-loading__text">{{ props.text }}</span>
    </YunCard>
</template>

<style lang="scss" scoped>
    .yun-loading {
        display: flex;
        align-self: center;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        span.yun-loading__text {
            font-size: 1.3em;
            margin-top: 48px;
        }
    }
</style>
